<script setup lang="ts">
import { ref } from 'vue'
// 导入订单列表子组件
import OrderList from './components/OrderList.vue'

// tabs 数据
const childRef1 = ref()
const childRef2 = ref<InstanceType<typeof OrderList>>()
const childRef3 = ref<InstanceType<typeof OrderList>>()
const childRef4 = ref<InstanceType<typeof OrderList>>()
const childRef5 = ref<InstanceType<typeof OrderList>>()
const orderTabs = ref([
  { orderState: 0, title: '全部', ref: 'childRef1' },
  { orderState: 1, title: '待付款', ref: 'childRef2' },
  { orderState: 2, title: '待发货', ref: 'childRef3' },
  { orderState: 3, title: '待收货', ref: 'childRef4' },
  { orderState: 4, title: '待评价', ref: 'childRef5' },
])

// const orderTabs = ref([
//   { orderState: 0, title: '全部' },
//   { orderState: 1, title: '待付款' },
//   { orderState: 2, title: '待发货' },
//   { orderState: 3, title: '待收货' },
//   { orderState: 4, title: '待评价' },
// ])

// 获取页面参数
const query = defineProps<{
  type: string
}>()
const refresh = () => {
  childRef1.value?.getOrderList()
  childRef2.value?.getOrderList()
  childRef3.value?.getOrderList()
  childRef4.value?.getOrderList()
  childRef5.value?.getOrderList()
}

// 高亮下标
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === Number(query.type)))
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text
        class="item"
        v-for="(item, index) in orderTabs"
        :key="item.title"
        @tap="activeIndex = index"
      >
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
      <!-- 滑动项 -->
      <swiper-item>
        <!-- 以标签的形式调用OrderList订单列表子组件，:order-state是用于传递参数到子组件中，传递的是当前滑动项所对应的订单状态 -->
        <OrderList :order-state="0" @parentMethod="refresh" ref="childRef1" />
      </swiper-item>
      <swiper-item>
        <OrderList :order-state="1" @parentMethod="refresh" ref="childRef2" />
      </swiper-item>
      <swiper-item>
        <OrderList :order-state="2" @parentMethod="refresh" ref="childRef3" />
      </swiper-item>
      <swiper-item>
        <OrderList :order-state="3" @parentMethod="refresh" ref="childRef4" />
      </swiper-item>
      <swiper-item>
        <OrderList :order-state="4" @parentMethod="refresh" ref="childRef5" />
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 25rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #3c69dc;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

.swiper {
  background-color: #f7f7f8;
}

.orders {
  .card {
    min-height: 100rpx;
    padding: 20rpx;
    margin: 20rpx 20rpx 0;
    border-radius: 10rpx;
    background-color: #fff;

    &:last-child {
      padding-bottom: 40rpx;
    }
  }

  .status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #999;
    margin-bottom: 15rpx;

    .date {
      color: #666;
      flex: 1;
    }

    .primary {
      color: #ff9240;
    }

    .icon-delete {
      line-height: 1;
      margin-left: 10rpx;
      padding-left: 10rpx;
      border-left: 1rpx solid #e3e3e3;
    }
  }

  .goods {
    display: flex;
    margin-bottom: 20rpx;

    .cover {
      width: 170rpx;
      height: 170rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;
    }

    .quantity {
      position: absolute;
      bottom: 0;
      right: 0;
      line-height: 1;
      padding: 6rpx 4rpx 6rpx 8rpx;
      font-size: 24rpx;
      color: #fff;
      border-radius: 10rpx 0 0 0;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .name {
      height: 80rpx;
      font-size: 26rpx;
      color: #444;
    }

    .type {
      line-height: 1.8;
      padding: 0 15rpx;
      margin-top: 10rpx;
      font-size: 24rpx;
      align-self: flex-start;
      border-radius: 4rpx;
      color: #888;
      background-color: #f7f7f8;
    }

    .more {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22rpx;
      color: #333;
    }
  }

  .payment {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    line-height: 1;
    padding: 20rpx 0;
    text-align: right;
    color: #999;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eee;

    .quantity {
      font-size: 24rpx;
      margin-right: 16rpx;
    }

    .amount {
      color: #444;
      margin-left: 6rpx;
    }

    .symbol {
      font-size: 20rpx;
    }
  }

  .action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20rpx;

    .button {
      width: 180rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20rpx;
      border-radius: 60rpx;
      border: 1rpx solid #ccc;
      font-size: 26rpx;
      color: #444;
    }

    .secondary {
      color: #3c69dc;
      border-color: #3c69dc;
    }

    .primary {
      color: #fff;
      background-color: #3c69dc;
    }
  }

  .loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
  }
}
</style>
